<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<div class="container-fluid">
    <!--页头-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{'/breadCrumb'}">Java分享</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav" id="navbar">
                </ul>
            </div>
        </div>
    </nav>
    <!--面包屑-->
    <ol class="breadcrumb">
    </ol>
    <div class="list-group" id="submenu-list">
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var ctx=$("#ctx").val();
    $(function () {
       // 获取一级菜单
        getLevelMenu(1);
    });

    function getLevelMenu(level) {
        $.ajax({
            url: ctx+"/category/levelCategoryList",
            type: "GET",
            data: {"level":level},
            success: function (result) {
                var text='';
                if (result.success) {
                    if(result.data != null){
                        // 一级菜单
                        $.each(result.data, function (i, r) {
                            text += '<li><a href="#" onclick="getSubMenu('+r.id+')">'+r.categoryName+'</a></li>'
                        });
                        $("#navbar").empty();
                        $("#navbar").append(text);
                    }
                } else {
                    alert(result.message);
                }
            }
        });
    }

    function getSubMenu(id){
        $.ajax({
            url: ctx+"/category/subCategoryList",
            type: "GET",
            data: {"parentId":id},
            success: function (result) {
                var text='';
                if (result.success) {
                    if(result.data != null){
                        // 子菜单
                        $.each(result.data, function (i, r) {
                            console.log(i);
                            text += '<a href="#" class="list-group-item" onclick="getBreadCrumb('+r.id+')">'+r.categoryName+'</a>'
                        });
                        $("#submenu-list").empty();
                        $("#submenu-list").append(text);
                    }
                } else {
                    alert(result.message);
                }
            }
        });
    }

    // 生成面包屑导航
    function getBreadCrumb(id) {
        var param = {id:id};
        $.ajax({
            url: ctx+"/category/parentCategoryList",
            type: "GET",
            data: {"id":id},
            success: function (result) {
                var text='';
                if(result.data!=null){
                    text = '<li><a href="#">首页</a></li>';
                    $.each(result.data, function (i, r) {
                        text += '<li><a href="#">'+r.categoryName+'</a></li>'
                    });

                    $(".breadcrumb").empty();
                    $(".breadcrumb").append(text);
                }
            }
        })
    }
</script>
</body>

</html>